<template>
    <div class="show-cham-video">
        <VideoHeader v-if="!isScreenFull"></VideoHeader>
        <VideoMiddle @doChangeScreenStatus="doChangeScreenStatus"></VideoMiddle>
<!--        <VideoWithDanmu></VideoWithDanmu>-->
    </div>
</template>

<script>
    import VideoHeader from '@/components/video/videoHeader'
    import VideoMiddle from '@/components/video/videoMiddle'
    import VideoWithDanmu from '@/components/video/videoWithDanmu'


    export default {
        name: "chamVideo",
        components:{VideoHeader,VideoMiddle,VideoWithDanmu},
        data(){
            return{
                isScreenFull:false,
                videoName:''
            }
        },
        mounted(){
            // var localStorage = window.localStorage;
            // var videoName = localStorage.getItem("videoName");
            // this.videoName = videoName;
            // debugger;
        },
        methods:{
            //这个地方有一个对应全屏的方法。如果是全屏，就隐藏以及修改某些元素的属性来实现视频全屏
            // doFullScreen(){
            //
            // }
            doChangeScreenStatus(screenStatus){
                var self = this;
                //半屏转全屏
                if(screenStatus){
                    self.isScreenFull = true;
                }

                //全屏转半屏
                if(!screenStatus){
                    self.isScreenFull = false;
                }
                //debugger;
            }
        }

    }
</script>

<style scoped>
    .show-cham-video{
        width:100%;
        height:100%;
        /*margin-top:20px;*/
        /*margin-left:20px;*/
        position:relative;
    }
</style>
